<template>
  <div class="m-24 overflow-scroll"
  style="height:calc(100vh - 4rem - 6rem - 6rem)"
  >
    <el-tabs tabPosition="left">
      <el-tab-pane class="p-5" :lazy="true" label="基本信息">
        <!-- <van-sticky> -->
          <div class="flex">
            <el-avatar
              shape="circle"
              :size="100"
              class="shadow-sm flex-shrink-0 select-none"
              :src="info.ava" 
            />
            <el-upload
              action="/upload/avatar"
              class="avatar-uploader absolute opacity-0 avatar"
              :show-file-list="false"
              :multiple="false"
              ref="avaupload"
              :on-change="fileChange"
              :auto-upload="false"
              :http-request="upload"
            >
              <el-avatar
                shape="circle"
                :size="100"
              >更换头像</el-avatar>
            </el-upload>
            <div class="ml-5 w-full flex flex-col justify-evenly items-start">
              <p class="select-none">
                <input v-show="change.name"
                ref="name"
                @keyup.enter="e=>{infochange(e,'name')}"
                v-model="info.name"
                class="font-bold text-3xl canchange"/>
                <span v-show="!change.name"
                @click="infochange(false,'name')"
                class="font-bold text-3xl canchange">{{info.name}}</span>
                <span>（账号:&nbsp;&nbsp;{{info.acc}})</span>
              </p>
              <el-divider class="my-0" />
              <p class="text-base min-w-full flex">
                <span class="select-none">签名:&nbsp;&nbsp;</span>
                <input v-show="change.gxqm"
                ref="gxqm"
                @keyup.enter="e=>{infochange(e,'gxqm')}"
                v-model="info.gxqm"
                class="ingchange flex-1"/>
                <span v-show="!change.gxqm"
                @click="infochange(false,'gxqm')"
                class="canchange flex-1">{{info.gxqm}}</span>
              </p>
            </div>
          </div>
        <!-- </van-sticky> -->
        <div class="border-t border-b border-opacity-60 mt-5 pl-4 flex items-center h-14 overflow-hidden">
          <span class="flex-shrink-0 opacity-80 inline-block select-none" style="width: 6.2em;" >
            性别
          </span>
          <transition name="sc-picker" mode="out-in">
            <scroll-picker v-if="change.sex" :options="sexs" v-model="info.sex" />
            <p v-else class="selectchange h-full w-full flex items-center"
            >{{info.sex?sexs.find(e=>e.value==info.sex).name:'未选择'}}</p>
          </transition>
          <el-button
            type="text"
            :icon="`el-icon-${change.sex?'check':'edit'}`"
            circle
            @click="infochange(change.sex,'sex')"
          ></el-button>
        </div>
        <div class="border-t border-b border-opacity-60 mt-5 pl-4 flex items-center h-14 overflow-hidden">
          <span class="flex-shrink-0 opacity-80 inline-block select-none" style="width: 6.2em;" >
            真实姓名
          </span>
          <input @change="changeinfo('realname')" class="selectchange h-full w-full flex items-center"
          v-model="info.realname"
          />
        </div>
        <div class="border-b border-opacity-60 pl-4 flex items-center h-14 overflow-hidden">
          <span class="flex-shrink-0 opacity-80 inline-block select-none" style="width: 6.2em;" >
            生日
          </span>
          <transition name="sc-picker" mode="out-in">
            <div v-if="change.bir" class="picker-group">
              <scroll-picker :options="years" v-model="bir.y" />
              <scroll-picker :options="months" v-model="bir.m" />
              <scroll-picker :options="days" v-model="bir.d" />
            </div>
            <p v-else class="selectchange h-full w-full flex items-center"
            >{{info.bir? info.bir :'未选择'}}</p>
          </transition>
          <el-button
            type="text"
            :icon="`el-icon-${change.bir?'check':'edit'}`"
            circle
            @click="birchange()"
          ></el-button>
        </div>
        <div class="border-b border-opacity-60 mb-5 pl-4 flex items-center h-14 overflow-hidden">
          <span class="flex-shrink-0 opacity-80 inline-block select-none" style="width: 6.2em;" >
            年龄
          </span>
          <p class="selectchange h-full w-full flex items-center"
          >{{change.bir? age:info.age? info.age :'未选择'}}</p>
          <span class="flex-shrink-0 opacity-80 inline-block select-none" style="width: 6.2em;" >
            星座
          </span>
          <p class="selectchange h-full w-full flex items-center"
          >{{change.bir? constellation+'座':info.constellation? info.constellation+'座' :'未选择'}}</p>
        </div>
        <div class="border-t border-b border-opacity-60 mt-5 pl-4 flex items-center h-14 overflow-hidden">
          <span class="flex-shrink-0 opacity-80 inline-block select-none" style="width: 6.2em;" >
            职业
          </span>
          <transition name="sc-picker" mode="out-in">
            <scroll-picker v-if="change.job" :options="jobcolumns" v-model="info.job" />
            <!--  <template v-slot:default="jobcolumns">
                <div class="flex items-center justify-center">
                  <span>{{ option.name }}?????????</span>
                </div>
              </template>
            </scroll-picker> -->
            <p v-else class="selectchange h-full w-full flex items-center"
            >{{info.job? `${info.job} - ${jobcolumns.find(e=>e.value==info.job).name}` :'未选择'}}</p>
          </transition>
          <el-button
            type="text"
            :icon="`el-icon-${change.job?'check':'edit'}`"
            circle
            @click="infochange(change.job,'job')"
          ></el-button>
          
        </div>
        <div class="border-b border-opacity-60 pl-4 flex items-center h-14 overflow-hidden">
          <span class="flex-shrink-0 opacity-80 inline-block select-none" style="width: 6.2em;" >
            所在地
          </span>
          <transition name="sc-picker" mode="out-in">
            <div v-if="change.area" class="picker-group">
              <scroll-picker :options="province" v-model="area.province" />
              <scroll-picker :options="city" v-model="area.city" />
              <scroll-picker :options="county" v-model="area.county" />
            </div>
            <p v-else class="selectchange h-full w-full flex items-center"
            >{{info.area? jiexi(info.area):'未选择'}}</p>
          </transition>
          <el-button
            type="text"
            :icon="`el-icon-${change.area?'check':'edit'}`"
            circle
            @click="areachange()"
          ></el-button>
        </div>
        <div class="border-b border-opacity-60 mb-5 pl-4 flex items-center h-14 overflow-hidden">
          <span class="flex-shrink-0 opacity-80 inline-block select-none" style="width: 6.2em;" >
            邮箱
          </span>
          <input @change="changeinfo('mail')" class="selectchange h-full w-full flex items-center"
          v-model="info.mail"
          />
        </div>
        
        <div class="border-t border-b border-opacity-60 mt-5 pl-4 flex items-center h-14 overflow-hidden">
          <span class="flex-shrink-0 opacity-80 inline-block select-none" style="width: 6.2em;" >
            个人说明
          </span>
          <input @change="changeinfo('info')" class="selectchange h-full w-full flex items-center"
          v-model="info.info"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane :lazy="true" label="安全信息">
        <div class="border-t border-b border-opacity-60 mt-5 pl-4 flex items-center h-14 overflow-hidden">
          <span class="flex-shrink-0 opacity-80 inline-block select-none" style="width: 6.2em;" >
            用户类型
          </span>
          <p class="selectchange h-full w-full flex items-center"
          >{{info.type? '发布者':'参赛者'}}</p>
          <el-button
            type="text"
            icon="el-icon-top"
            circle
            title="提示用户权限"
            @click="$router.push({name:'apply'})"
          />
        </div>
        <div class="border-t border-opacity-60 mt-5 pl-4 flex items-center h-14 overflow-hidden">
          <span class="flex-shrink-0 opacity-80 inline-block select-none" style="width: 6.2em;" >
            绑定邮箱
          </span>
          <span class="w-full">{{info.email? info.email:'未绑定邮箱'}}</span>
          <el-button plain @click="changeMail">修改绑定邮箱</el-button>
        </div>
        <div class="border-t border-b border-opacity-60 pl-4 flex items-center h-14 overflow-hidden">
          <span class="flex-shrink-0 opacity-80 inline-block select-none" style="width: 6.2em;" >
            密码
          </span>
          <span class="w-full">●●●●●●</span>
          <el-button plain @click="changePwd">修改密码</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane :lazy="true" label="注销账户">
        <div class="flex flex-col items-center">
          <span class="mb-5 text-yellow-600 text-2xl flex">点满注销
            <svg t="1647674284335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2771" width="32" height="32"><path d="M148.314839 534.792258c0 20.48 31.380645 36.996129 69.698064 36.996129s69.698065-16.516129 69.698065-36.996129c0-20.48-31.380645-36.996129-69.698065-36.996129-38.317419 0-69.698065 16.846452-69.698064 36.996129zM728.36129 534.792258c0 20.48 31.380645 36.996129 69.698065 36.996129s69.698065-16.516129 69.698064-36.996129c0-20.48-31.380645-36.996129-69.698064-36.996129-38.317419 0-69.698065 16.846452-69.698065 36.996129z" fill="#97FFFF" p-id="2772"></path><path d="M872.712258 802.023226c71.68-85.553548 110.988387-192.908387 110.988387-305.218065 0-262.276129-213.388387-475.664516-475.664516-475.664516S32.371613 234.529032 32.371613 496.805161c0 112.64 39.308387 219.994839 111.31871 305.548387-15.855484 10.24-26.095484 24.113548-28.07742 39.63871-2.312258 15.855484 0.660645 37.987097 26.425807 54.833548 14.534194 9.579355 32.701935 15.194839 50.539355 20.48 17.837419 5.615484 38.317419 11.891613 45.914838 20.149678l0.990968 1.32129 1.32129 0.990968c8.91871 7.267097 18.828387 31.380645 22.461936 45.254193 2.972903 11.56129 14.864516 18.167742 26.095484 15.194839 11.56129-2.972903 18.167742-14.864516 15.194838-26.095484-1.981935-7.927742-13.543226-47.566452-35.674838-66.725161-15.855484-16.185806-40.299355-23.783226-64.082581-31.050323-38.317419-11.891613-48.557419-17.837419-47.236129-28.407741 0.660645-3.633548 9.249032-13.212903 32.04129-18.498065 48.227097-11.230968 151.618065 1.981935 233.868387 122.88 1.651613 3.633548 9.579355 21.140645 7.927742 42.941935-0.990968 11.891613 7.927742 22.131613 19.819355 23.122581h1.651613c11.230968 0 20.48-8.588387 21.470968-19.819355 0.660645-9.909677 0.330323-19.15871-0.990968-27.416774 10.570323 0.660645 21.470968 0.990968 32.701936 0.990968 12.882581 0 25.104516-0.330323 36.665806-1.32129-1.32129 8.258065-1.651613 17.507097-0.990968 27.416774 0.660645 11.230968 10.24 19.819355 21.470968 19.819355h1.651613c11.891613-0.990968 20.810323-11.230968 19.819355-23.122581-1.651613-22.131613 6.276129-39.63871 7.927742-42.941936 82.250323-120.567742 185.64129-134.110968 233.868387-122.88 22.792258 5.285161 31.380645 14.864516 32.04129 18.498065 1.32129 10.570323-8.588387 16.846452-47.236129 28.407742-23.783226 7.267097-48.227097 14.864516-64.082581 31.050322-22.461935 19.15871-33.692903 58.797419-35.674838 66.725162-2.972903 11.56129 3.963871 23.122581 15.194838 26.095484 11.56129 2.972903 23.122581-3.633548 26.095484-15.194839 3.633548-13.873548 13.543226-37.987097 22.461936-45.254194l1.32129-0.990967 0.990968-1.321291c7.927742-8.588387 28.077419-14.864516 45.914839-20.149677 17.837419-5.615484 36.335484-11.230968 50.539354-20.48 25.765161-16.846452 28.738065-39.308387 26.425807-54.833549-1.32129-15.525161-11.56129-29.39871-27.747097-39.638709z m-170.446452 0.990968c-51.2 21.80129-97.775484 60.11871-135.76258 111.649032-18.498065 2.642581-38.317419 3.963871-60.449032 3.963871-19.819355 0-38.647742-1.32129-56.154839-3.633549-76.304516-103.72129-177.052903-140.056774-252.036129-130.807742-73.00129-78.286452-112.970323-180.356129-112.970323-287.710967 0-233.207742 189.605161-422.812903 422.812903-422.812904s422.812903 189.605161 422.812904 422.812904c0 107.024516-39.969032 209.094194-112.970323 287.710967-35.674839-3.963871-76.634839 2.642581-115.282581 18.828388z" fill="#68A5FF" p-id="2773"></path><path d="M659.654194 441.971613a66.725161 65.403871 0 1 0 133.450322 0 66.725161 65.403871 0 1 0-133.450322 0Z" fill="#68A5FF" p-id="2774"></path><path d="M371.943226 443.953548c-42.611613-72.670968-126.183226-80.59871-129.816774-80.598709-10.900645-0.990968-20.48 7.267097-21.470968 18.167742-0.990968 10.900645 7.267097 20.48 18.167742 21.470967 0.660645 0 59.458065 5.615484 93.48129 52.851613l-100.087742 14.864516c-10.900645 1.651613-18.167742 11.56129-16.846451 22.461936 1.32129 9.909677 9.909677 16.846452 19.489032 16.846452 0.990968 0 1.981935 0 2.972903-0.330323l109.336774-16.185807c11.230968-1.32129 20.149677-7.267097 25.434839-16.185806 5.285161-9.249032 5.285161-21.140645 0-32.04129l-0.660645-1.321291zM593.589677 576.743226c-9.249032 0-16.516129 7.267097-16.516129 16.516129 0 37.987097-30.72 68.707097-68.707096 68.707097s-68.707097-30.72-68.707097-68.707097c0-9.249032-7.267097-16.516129-16.516129-16.516129s-16.516129 7.267097-16.516129 16.516129c0 56.154839 45.584516 101.739355 101.739355 101.739355s101.739355-45.584516 101.739354-101.739355c0-8.91871-7.597419-16.516129-16.516129-16.516129z" fill="#68A5FF" p-id="2775"></path></svg>
          </span>
          <el-progress type="dashboard" :percentage="Number((percentage-0.01).toFixed(2))" :color="[
            {color: '#f56c6c', percentage: 20},
            {color: '#e6a23c', percentage: 40},
            {color: '#5cb87a', percentage: 60},
            {color: '#1989fa', percentage: 80},
            {color: '#6f7ad3', percentage: 100}
          ]"></el-progress>
          <el-button type="warning"
          @click="leaveWe"
          >我坚持注销</el-button>
          <pre />
          <el-button type="success" plain
          class="mt-2"
          @click="()=>{
            $message.success('好孩子')
            $router.push({name:'competition'})
          }"
          >我放弃注销</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- {{info}}
    <div>
      <img :src="info.ava" alt="">
    </div> -->
  </div>
</template>

<script>
  // import changerow from './modules/changerow'
  import { uploadAva } from '@/api/fileApis'
  import { changeUserInfo } from '@/api/userApi.js'
  import { mapGetters,mapActions,mapMutations } from 'vuex'
  import { mailReg,dateFormat,blobToBase64 } from '@/utils/functions'
  // import { province,city,county } from './modules/area';
  import areamixin from './modules/area'
  import birmixin from './modules/bir'
  import { debounce } from 'lodash'
  export default {
    // components:{changerow},
    mixins:[areamixin,birmixin],
    data() {
      return {
        change:{
          name:false,
          gxqm:false,
          sex:false,
          bir:false,
          job:false,
          mail:false,
          area:false,
        },
        percentage:0.01,
        sexs:[
          {name:'男',value:'1'},
          {name:'女',value:'2'},
          {name:'保密',value:'3'},
        ],
        imageUrl: '',
			  jobcolumns:[
			  	{value:'IT',name:'计算机/互联网/通信'},
			  	{value:'医疗',name:'医疗/护理/制药'},
			  	{value:'金融',name:'金融/银行/投资/保险'},
			  	{value:'商业',name:'商业/服务业/个体经营'},
			  	{value:'文化',name:'文化/广告/传媒'},
			  	{value:'艺术',name:'娱乐/艺术/表演'},
			  	{value:'法律',name:'律师/法务'},
			  	{value:'教育',name:'教育/培训'},
			  	{value:'行政',name:'公务员/行政/事业单位'},
			  	{value:'模特',name:'模特'},
			  	{value:'空姐',name:'空姐'},
			  	{value:'学生',name:'学生'},
			  	{value:'其他',name:'其他职业'}
			  ],
        changeinfo:debounce(key=>{
          const value = this.info[key]
          changeUserInfo({list:[{key,value}],iid:this.info.i_id})
          .then(()=>{this.$message.success("自动保存成功")})
          .catch(()=>{this.$message.error("修改失败")})
        },1000)
      }
    },
    created(){
      console.log(this.info)
    },
    methods: {
      ...mapMutations(['CHANGE_INFO']),
      fileChange(file,fileList){
        const typeok = ['image/jpeg','image/png'].includes(file.raw.type)
        const size = 10
        const sizeok =  file.size / 1024 / 1024 < size
        if (!typeok) this.$message.error('文件类型异常')
        if (!sizeok) this.$message.error(`文件过大(${size}MB以内)`)
        if(!typeok || !sizeok) return false
        this.imageUrl = URL.createObjectURL(file.raw);
        if(fileList.length>1)
          fileList.splice(0,1)
        this.$confirm(`<div class="flex items-center flex-col">
          <span>将头像替换为</span>
          <img src="${this.imageUrl}" style="height:200px;width:200px;object-fit: cover;" />
        </div>`, '修改头像', {
          closeOnClickModal:false,
          closeOnPressEscape:false,
          dangerouslyUseHTMLString:true,
          confirmButtonText: '确认',
          cancelButtonText: '放弃修改',
          center: true
        })
        .then(()=>{
          // this.$refs.avaupload.submit()
          this.upload()
        })
        .catch(()=>{
          this.imageUrl=null
        }).then(()=>{
          this.$refs.avaupload.clearFiles()
        })
      },
      async infochange(e,key){
        if(!e){
          this.change[key] = String(this.info[key])
          if(this.$refs[key])
            this.$nextTick(()=>{this.$refs[key].focus()})
        }else{
          const value = this.info[key]
          if(value !== this.change[key]){
            const list = []
            list.push({key,value})
            await changeUserInfo({list,iid:this.info.i_id}).catch(()=>{
              this.CHANGE_INFO(list)
              throw new Error()
            })
            this.$message.success("修改成功")
          }
          this.change[key] = false
        }
      },
      async upload(){
        const { i_id:iid } = this.info
        const file = this.$refs.avaupload.uploadFiles[0].raw
        const value = await blobToBase64(file)
        const list = [{key:'ava',value}]
        await changeUserInfo({list,iid})
        this.CHANGE_INFO(list)
      },
      async changeMail(){
        
      },
      async changePwd(){
        
      },
      async leaveWe(){
        const arr = ['哦!加油','快要成功了','点完就注销了','哦太棒了','great','very good','wonderful','unbelievable']
        const index = Math.floor((Math.random()*arr.length))
        this.$message.info({message:arr[index],duration:500})
        this.percentage += (100-this.percentage)/20
        if(Math.random()<0.05){
          this.$message.error({message:'哦!一不小心它没了',duration:500})
          this.percentage = 0.01
        }else if(Number((this.percentage-0.01).toFixed(2)) >= 100){
          this.$alert('500 Bad Gateway', '服务器异常', {
            confirmButtonText: '确定',
            callback: action => {
              this.percentage = 0.01
            }
          })
        }
      }
    },
    computed:{
      ...mapGetters(['info']),
      // nameError(){
    	 //  return this.info.name.length === 0? true:false
      // },
      // mailError(){
      // 	return mailReg(this.info.mail)? false:true
      // }
    },
  }
</script>

<style lang="scss" scopet>
.sc-picker{
  &-enter-active, &-leave-active {
    transition: opacity .5s;
  }
  &-enter-from, &-leave-to {
    opacity: 0;
  }
}
.avatar{
  cursor: pointer;
  transition: all .5s;
  &:hover{
    opacity: 0.8;
  }
}
.el-button{
  transition: all .5s;

}
.selectchange{

}
.picker-group{
  display:flex;
  width:100%
}
.ingchange{
  padding-left: 10px ;
  border-radius: 5px;
  background: #00000002;
  box-shadow: 0 0 2px 1px #0005;
}
.canchange{
  cursor:text;
  border-radius: 5px;
  padding: 0 1rem;
  transition: all 1s;
  background: #0000;
  box-shadow: 0 0 2px 1px #0000;
  &:hover{
    background: #00000005;
    box-shadow: 0 0 2px 1px #0005;
  }
}
</style>